<template>
  <div class="login-wrap">
    <header>
      <!-- <img src="../../assets/images/logo.png" alt="" /> -->

      <h1>浙江工商大学</h1>
    </header>

    <el-form :model="form" label-width="95" class="form">
      <el-form-item label="用户名:">
        <el-input v-model="form.username" />
      </el-form-item>

      <el-form-item label="密码:">
        <el-input v-model="form.password" type="password" />
      </el-form-item>

      <el-form-item>
        <el-checkbox v-model="form.checked">记住密码</el-checkbox>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" style="width: 100%" @click="login">
          登录
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from "vue";
// 信息框是需要额外引入的
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
import { useUsersStore } from "@/stores/users";

// 调用useRouter返回路由实例，用来跳转
// useRouter只能在js的顶层进行调用
const router = useRouter();
const store = useUsersStore();

interface FromType {
  username: string;
  password: string;
  checked: boolean;
}
// reactive的类型用interface来定义
const form: FromType = reactive({
  username: localStorage.getItem("username") || "",
  password: localStorage.getItem("password") || "",
  checked: localStorage.getItem("username") ? true : false,
});

// 函数要写返回值类型void
const login = (): void => {
  // 请求并且跳转
  // console.log(form.username);
  // console.log(form.password);
  fetch("http://118.24.239.63:3001/api/admin/login", {
    method: "POST",
    body: JSON.stringify({
      username: form.username,
      password: form.password,
    }),
    headers: {
      "content-type": "application/json",
    },
  })
    .then((response) => response.json())
    .then((res) => {
      if (res.success) {
        // 判断是否记住密码，记住的话要存起来
        // 记住密码用的是本地存储
        if (form.checked) {
          localStorage.setItem("username", form.username);
          localStorage.setItem("password", form.password);
        } else {
          localStorage.removeItem("username");
          localStorage.removeItem("password");
        }
        // 成功
        ElMessage({
          message: res.msg,
          type: "success",
        });
        // 存token
        localStorage.setItem("token", res.token);

        // 将用户名存到pinia里面
        // store.username = res.username;
        store.changeName(res.username);

        // 页面跳转（编程式导航）
        router.push("/home");
      } else {
        // 失败
        // ElMessage.error(res.msg);
        ElMessage({
          message: res.msg,
          type: "error",
        });
      }
    });
};
</script>

<style lang="less">
.login-wrap {
  width: 100%;
  height: 100vh;
  background-image: url("../../assets/images/background.jpg");
  background-size: 100% auto;
  background-position: 0 60%;
  position: relative;

  header {
    width: 100%;
    height: 80px;
    background-color: rgba(255, 255, 255, 0.5);

    h1 {
      width: 350px;
      height: 80px;
      background-image: url("../../assets/images/logo.png");
      background-size: 100% 100%;
      text-indent: -9999px;
    }
  }

  .form {
    width: 500px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 50%;
    padding: 30px;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 20px;
  }
}
</style>
